<template>
<div class="container">
    <!-- 顶部分标题栏和返回按钮 -->
    <back-topic :topic="topic"></back-topic>
    <!-- 标题栏下面的重叠的图 -->
    <img-overlapping></img-overlapping>
    <!-- 列表的标题 -->
    <goods-topic :topicHead="topicHead" :topicEnd="topicEnd" class="goods"></goods-topic>
    <!--商品的列表里面的单个商品 点击跳转到商品详情页  GoodsListOne是传递的值，用来改写这个模块的里面的值，详情看goodsListOne组件-->
    <router-link to="/productDetail" tag="div" class="goods">
        <!-- 列表页中的单个商品 -->
        <goods-list-one :GoodsListOne="GoodsListOne"></goods-list-one>
    </router-link>
    <router-link to="/productDetail" tag="div" class="goods">
        <!-- 列表页中的单个商品 -->
        <goods-list-one :GoodsListOne="GoodsListOne"></goods-list-one>
    </router-link>
    <router-link to="/productDetail" tag="div" class="goods">
        <!-- 列表页中的单个商品 -->
        <goods-list-one :GoodsListOne="GoodsListOne"></goods-list-one>
    </router-link>
    <!-- 右下角的我的拼团图标 -->
    <router-link to="/MyAssemble" tag="div" class="imgDiv">
        <img src="../../assets/image/groupAssemble/group.png">
    </router-link>
</div>
</template>

<script>
// 引入顶部的返回按钮
import BackTopic from '../commentCompontents/back-topic'
// 引入顶部标题栏下面的重叠的照片
import ImgOverlapping from '../commentCompontents/imgOverlapping'
// 引入下面列表的标题
import GoodsTopic from '../commentCompontents/goodsTopic'
//列表页中的单个商品
import GoodsListOne from '../commentCompontents/goodsListOne'
export default {
    name: "everyDaySign",
    components: {
        BackTopic,
        ImgOverlapping,
        GoodsTopic,
        GoodsListOne

    },
    data() {
        return {
            // 绑定给顶部的标题的值
            topic: "嗨拼团",
            // 传递给列表标题的值，
            topicHead: "拼着买",
            topicEnd: "更便宜",
            // 传递给列表单个商品模块的值
            GoodsListOne: {
                personGroup: "2人团",
                Immediately: "立即组团",
                GoodsNumber: "已拼200件",
                // 控制单个商品模块标题下面的抢购数量是否显示，默认不显示
                numberShow: true,
                // 控制进度条的显示与隐藏
                barShow: false,

            },

        }
    },
}
</script>

<style scoped>
.container {
    width: 100%;
}

.goods {
    margin-top: .3rem;
}

.imgDiv {
    width: 1.5rem;
    height: 1.5rem;
    position: fixed;
    bottom: 2rem;
    right: .1rem;
}

.imgDiv>img {
    width: 100%;
}
</style>
